<template>
   <el-button type="primary" @click="dialogFormVisible = true">添加客房</el-button>
   <!-- 添加框 -->
    <el-dialog v-model="dialogFormVisible" title="添加客房信息">
      <el-form :model="form" ref="formRef"  :rules="rules">
        <el-form-item label="编号"    prop="rnmb">
          <el-input  autocomplete="off"  v-model="form.rnmb"/>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
            <el-button type="primary" @click="submitForm(formRef)">提交</el-button>
            <el-button @click="resetForm(formRef)">重置</el-button>
        </span>
      </template>

    </el-dialog>
    <!-- /添加框-->
</template>

<script>
  import { toRefs,reactive,ref } from 'vue'
   export default{
     name:'TestRoom',
     setup(){
          const formRef = ref()
          const dialogFormVisible = ref('false') 
          const form = reactive({ rnmb:''})

          const rules = reactive({
            rnmb:[
                {required: true,message:'客房编号是必须'}
            ]
          })

          function resetForm(formEl){
            if (!formEl) return  //如果 formEl 对象是空的，则停止函数执行
            formEl.resetFields(); //resetFields重置属性值
          }

          function submitForm(formEl){
            if (!formEl) return
            formEl.validate( function(valid){
                console.log("valid===",valid)
                if(valid){
                   console.log("验证通过，进行提交")
                }else{
                    console.error("验证失败！！")
                }
            })
          }

        
          return{
            dialogFormVisible,
            form,
            formRef,
            rules,
            submitForm,
            resetForm
          }
     }
   }
</script>